<template>
  <div class="fantasy-shell">
    <div class="page-container">
      <div v-for="(list, index) in movieLists" :key="index" class="page">
        <h2>{{ list.title }}</h2>
        <ul class="movie-list">
          <li v-for="movie in list.movies" :key="movie.movieId">
            <div class="movie-item">
              <img :src="movie.posterPath" alt="电影海报" class="poster">
              <div class="movie-details">
                <div class="page-title">
                  <h3><a @click="detailsId(movie.movieId)" class="title">{{ movie.title }}</a></h3>
                </div>
                <div class="movie-info">
                  <div class="info-item">
                    <span class="label">导演：</span>
                    <span class="value">{{ movie.directors }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">主演：</span>
                    <span class="value">{{ movie.actors }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">类别：</span>
                    <span class="value">{{ movie.genres }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">上映时间：</span>
                    <span class="value">{{ movie.releaseDate }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">时长：</span>
                    <span class="value">{{ movie.runtime }}分钟</span>
                  </div>
                  <div class="info-item">
                    <span class="label">评分：</span>
                    <span class="value">{{ movie.avgRating }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      movieLists: [
        {title: "动作排行榜", movies: []},
        {title: "冒险排行榜", movies: []},
        {title: "动漫排行榜", movies: []},
        // {title: "儿童排行榜", movies: []},
        // {title: "喜剧排行榜", movies: []},
        // {title: "犯罪排行榜", movies: []},
        // {title: "记录排行榜", movies: []},
        // {title: "戏剧排行榜", movies: []},
        // {title: "幻想排行榜", movies: []},
        // {title: "黑色排行榜", movies: []},
        // {title: "恐怖排行榜", movies: []},
        // {title: "音乐排行榜", movies: []},
        // {title: "神秘排行榜", movies: []},
        // {title: "浪漫排行榜", movies: []},
        // {title: "科幻排行榜", movies: []},
        // {title: "惊悚电影排行榜", movies: []},
        // {title: "战争电影排行榜", movies: []},
        // {title: "西方电影排行榜", movies: []},
        // {title: "家庭电影排行榜", movies: []},
        // {title: "电视电影排行榜", movies: []},
        // {title: "外国排行榜", movies: []},
        // {title: "历史排行榜", movies: []},
      ],
    };
  },
  methods: {
    selectPages() {
      const promises = this.movieLists.map((list, index) => {
        const categoryId = index + 1; // 计算对应的categoryId
        return request({
          url: '/movie/movie/leaderboard',
          method: "GET",
          params: {categoryId}
        }).then(response => {
          this.$set(this.movieLists, index, {...list, movies: response.data.data});
        });
      });

      Promise.all(promises).then(() => {
        console.log("电影排行榜数据加载完成");
      });
    },
    detailsId(id) {
      console.log('^^^^^^id^^^^^^', id)
      this.$router.push({
        path: '/details',
        query: {id: id}
      });
    },
  },
  mounted() {
    this.selectPages();
  },
};
</script>

<style scoped>
.fantasy-shell {
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

.page-container {
  margin-top: 20px;
}

.page {
  width: 100%;
  margin-bottom: 20px;
}

.page h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.movie-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.movie-list li {
  flex: 0 0 auto;
  margin-right: 20px;
}

.movie-item {
  display: flex;
  flex-direction: row; /* 项目水平排列 */
  width: 300px;
  overflow: hidden; /* 控制内容溢出时的行为 */
}

.poster {
  width: 120px;
  height: 195px; /* 固定高度为190px */
  object-fit: cover; /* 等比例缩放填充 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  margin-right: 20px;
}

.page-title {
  width: 180px; /* 与 movie-info 的宽度相同 */
}

.page-title h3 {
  max-width: 160px; /* 设置最大宽度，根据实际情况调整 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-title h3 a {
  font-size: 18px;
  font-weight: bold;
  color: #262626;
  text-decoration: none;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.movie-details {
  flex: 1;
}

.movie-info {
  display: flex;
  flex-direction: column;
  width: 180px;
}

.info-item {
  display: flex;
  align-items: center;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  margin-bottom: -7px; /* 调整项目之间的间距 */
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.title {
  max-width: 100px; /* 设置最大宽度，根据实际情况调整 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value {
  margin-right: 5px;
  max-width: 120px; /* 设置最大宽度，根据实际情况调整 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
